import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  /*
   第一个是状态变量，第二个参数是set函数用来修改状态变量
   count 状态变量
   setCount 修改状态变量的方法
  */
  const [count, setCount] = useState(0)
  const test_count = 100
  function getName() {
    return 'jack'
  }

  const list = [
    {
      id: 1001, name: 'vue'
    },
    {
      id: 1002, name: 'react'
    },
    {
      id: 1003, name: 'nodejs'
    },
  ]

  const isLogin = false;

  // 事件参数 e
  // const handleClick = (e) => {
  //   console.log('test', e);
  // }

  // 传递自定义参数
  // const handleClick = (name) => {
  //   console.log('test', name);
  // }

  // 既要传递自定义参数，还要事件对象
  const handleClick = (name, e) => {
    console.log('test', name, e);
  }

  const [count1, setCount1] = useState('标签的默认内容')
  const handleClick1 = () => {
    setCount1('新内容')
  }

  const [data, setData] = useState({
    title: "默认标题",
    content: "默认内容"
  })
  const handleClick2 = () => {
    setData({
      ...data, title: '新标题'
    })
  }

  // 对象操作
  const [list_data, setList] = useState([
    { id: 1, name: '小红' },
    { id: 2, name: '小明' },
    { id: 3, name: '小就' }
  ])
  const listData = list_data.map(item => (
    <li key={item.id}>{item.name}</li>
  ))
  // const listData = '1'
  // const handlelistData = () => {
  //   setList()
  // }

  // 修改对象状态
  const [form, setForm] = useState({ name: "jack" })
  const changeForm = () => {
    setForm({
      ...form,
      name: "yhw"
    })
  }

  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      {/* <h1>Vite + React</h1> */}
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      {/* <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p> */}

      {/* 使用引号传递字符串 */}
      {'使用引号传递字符串'}
      {/* 识别js变量 */}
      {test_count}
      {/* 函数调用 */}
      {getName()}
      {/* 方法调用 */}
      {new Date().getDate()}
      {/* 用js对象 */}
      <div style={{ color: 'red' }}>qwertyuiop</div>

      {/* 渲染列表 */}
      <ul>
        {list.map(item =>
          <li key={item.id}>{item.name}</li>
        )}
      </ul>

      {/* 逻辑与 && */}
      {isLogin && <span>this is</span>}

      {/* 三元运算 */}
      {isLogin ? <span>jack</span> : <span>loading...</span>}

      {/* 点击事件 */}
      {/* <button onClick={() => handleClick('abc')}>点击事件，传递参数</button> */}
      <button onClick={(e) => handleClick('abc', e)}>点击事件，传递参数</button>

      {/* 状态处理 */}
      <div>状态处理：{count1}</div>
      <button onClick={handleClick1}>状态处理</button>

      <div title={data.title}>{data.content}</div>
      <button onClick={handleClick2}>{data.content}</button>

      <ul>{listData}</ul>
      <Button />

      {/* 修改对象状态 */}
      <button onClick={changeForm}>{form.name}</button>
      <span className='foo'>this is span</span>
    </>
  )
}

function Button() {
  return <button>click me！</button>
}

export default App
